<template>
    <div class="a">
        <div class="b">
            <el-menu
                default-active="mainPage"
                class="navigation"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
                router
                unique-opened="true"
                text-color="#635656"
                active-text-color="#09fbfb"
                background-color="#f4f7f6"
                >
                <div class="f">
                    <img alt="Vue logo" src="../../assets/logo.png" style="height: 30%; width: 30%; ">
                    <span>管理员端</span>
                </div>
                <el-menu-item index="mainPage">
                    <el-icon><icon-menu /></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="classmanagement">
                    <el-icon><icon-menu /></el-icon>
                    <span>班级管理</span>
                </el-menu-item>
                <el-menu-item index="studentmanagement">
                    <el-icon><icon-menu /></el-icon>
                    <span>学生管理</span>
                </el-menu-item>
                <el-menu-item index="teachermanagement">
                    <el-icon><icon-menu /></el-icon>
                    <span>教师管理</span>
                </el-menu-item>
                <el-menu-item index="chat">
                    <el-icon><icon-menu /></el-icon>
                    <span>聊天室</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="c">
            <div class="d">
                <el-button class="btn" @click="personalInfoBox">个人信息</el-button>
                <el-button class="btn" @click="changePasswordBox">修改密码</el-button>
                <el-button class="btn" @click="exit">退出登录</el-button>
            </div>
            <div class="e">
                <!-- --------------------------------------个人信息对话框---------------------------------------------------------------- -->
                <el-dialog
                    v-model="this.isPersonalInfoVisible"
                    title="个人信息"
                    width="30%"
                    >      
                    <el-form :model="this.user" label-width="120px">
                        <el-form-item label="头像: " prop="headPortrait">
                            <el-input type="text" v-model="user.headPortrait"/>
                        </el-form-item>
                        <el-form-item label="姓名:" prop="username">
                            <el-input type="text" v-model="user.username" />
                        </el-form-item>
                        <el-form-item label="性别: " prop="sex">
                            <el-input type="text" v-model="user.sex" />
                        </el-form-item>
                        <!-- <el-form-item label="年龄: " prop="password">
                            <el-input type="text" v-model="user.age" />
                        </el-form-item> -->
                        <el-form-item label="手机号: " prop="phoneNumber">
                            <el-input type="text" v-model="user.phoneNumber" />
                        </el-form-item>
                        <el-form-item label="身份: " prop="role">
                            <el-input type="text" v-model="user.role" disabled />
                        </el-form-item>
                        <el-form-item label="身份描述: " prop="roleDres">
                            <el-input type="text" v-model="user.roleDescription" disabled />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span>
                            <el-button @click="isPersonalInfoVisible = false">取消</el-button>
                            <el-button type="primary" @click="updateInfo"
                                >修改信息</el-button
                            >
                        </span>
                    </template>
                </el-dialog>
                <!-- -------------------------------------修改密码对话框---------------------------------------------------------------- -->
                <el-dialog
                    v-model="this.isChangePasswordVisible"
                    title="修改密码对话框"
                    width="30%"
                    >      
                    <el-form :model="this.password" label-width="120px">
                        <el-form-item :label="table.oldPassword" prop="oldPassword">
                            <el-input type="text" v-model="password.oldPassword"/>
                        </el-form-item>
                        <el-form-item :label="table.newPassword" prop="newPassword">
                            <el-input type="text" v-model="password.newPassword"/>
                        </el-form-item>
                        <el-form-item :label="table.comfirmPassword" prop="comfirmPassword">
                            <el-input type="text" v-model="password.comfirmPassword"/>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span>
                            <el-button @click="isChangePasswordVisible = false">取消</el-button>
                            <el-button type="primary" @click="changePassword"
                                >确认修改密码</el-button
                            >
                        </span>
                    </template>
                </el-dialog>
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// const isCollapse = ref(false)
export default {
    setup() {
        // isCollapse = ref(false)
    },
    data() {
        return {
            table: {
                oldPassword: "旧密码",
                newPassword: "新密码",
                comfirmPassword:"确认密码"
            },
            // 密码
            password:{
                oldPassword: "",
                newPassword: "",
                comfirmPassword: ""
            },
            // 用户信息
            user: {},
            // 是否显示个人信息
            isPersonalInfoVisible: false,
            // 是否显示修改密码
            isChangePasswordVisible: false
        }
    },
    methods: {
        getPersonalInfo(){
            var _this = this
            this.$axios
                .get("user/info")
                .then( response => {
                    let stateCode = response.headers["state"]
                    if(stateCode=="200"){
                        this.user = response.data
                    }
                    else if(stateCode==null){
                        this.$message.success("请求数据异常！")
                    }
                    else{
                        this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                    }

                })
                .catch(function (error){
                    let stateCode = error.response.headers["state"]                            
                    if(stateCode!=""){
                        _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                    }
                    else{
                        _this.$message.error("后端异常")
                    }
                })
                .then(function (){
                    console.log("测试成功")
                })  
        },
        personalInfoBox() {
            this.isPersonalInfoVisible = true
        },
        updateInfo() { 
            var _this = this         
            ElMessageBox.confirm('你确定修改个人信息吗？', '警告',
                {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
            )
                .then(() => {
                    let formData = new FormData()
                    formData.append('userId',this.user.userId)
                    formData.append('username',this.user.username)
                    formData.append('sex',this.user.sex)
                    formData.append('headPortrait',this.user.headPortrait)
                    formData.append('phoneNumber',this.user.phoneNumber)
                    formData.append('role',this.user.role)
                    formData.append('roleDescription',this.user.roleDescription)
                    this.$axios
                        .post('/user/update',formData)
                        .then(response=> {
                            let stateCode = response.headers["state"]
                            if(stateCode=="200"){
                                this.$message.success("修改个人信息成功！")
                                this.isPersonalInfoVisible = false
                            }
                            else if(stateCode==""){
                                this.$message.success("修改个人信息异常！")
                            }
                            else{
                                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                            }

                        })
                        .catch(function (error){
                            let stateCode = error.response.headers["state"]                            
                            if(stateCode!=""){
                                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                            }
                            else{
                                _this.$message.error("后端异常")
                            }
                        })
                        .then(function (){
                            console.log("测试成功")
                        }) 
                })
                .catch(() => {
                    ElMessage({
                        type: 'error',
                        message: '已取消修改个人信息',
                    })
                })
        },
        changePasswordBox(){
            this.isChangePasswordVisible = true
        },
        changePassword(){   
            var _this = this         
            ElMessageBox.confirm('你确定修改密码吗？', '警告',
                {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
            )
                .then(() => {
                    let formData = new FormData()
                    formData.append('phoneNumber',this.user.phoneNumber)
                    formData.append('oldPassword',this.password.oldPassword)
                    formData.append('newPassword',this.password.newPassword)
                    this.$axios
                        .post('/user/updatepassword',formData)
                        .then(response=> {
                            let stateCode = response.headers["state"]
                            if(stateCode=="200"){
                                this.$message.success("修改密码成功！")
                                this.isChangePasswordVisible = false
                            }
                            else if(stateCode==""){
                                this.$message.success("修改密码异常！")
                            }
                            else{
                                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                            }

                        })
                        .catch(function (error){
                            let stateCode = error.response.headers["state"]                            
                            if(stateCode!=""){
                                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                            }
                            else{
                                _this.$message.error("后端异常")
                            }
                        })
                        .then(function (){
                            console.log("测试成功")
                        }) 
                })
                .catch(() => {
                    ElMessage({
                        type: 'error',
                        message: '已取消修改密码',
                    })
                })
        },
        exit() {
          this.$message.success('退出成功!')
          this.$router.push('/login')
          console.log(this.user)
        }
    },
    mounted() {
        this.getPersonalInfo()
    }
}
</script>

<style scoped>

.a{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.b {
    height: 100%;
    width: 15%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.c {
    height: 100%;
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.d {
    height: 10%;
    width: 100%;
    background-image: url("../../assets/login2.jpg");
    background-size: cover;
    /* 弹性盒子 */
    display: flex;
    /* 列的排列顺序 */
    justify-content: flex-end;
    /* 文字在纵轴上的位置 */
    align-content: center;
    /* 子元素在纵轴上的位置 */
    align-items: center;    
    box-sizing: border-box;
    padding: 0 15px;
}

.e {
    height: 90%;
    width: 100%;
    background-color: bisque;
    box-sizing: border-box;
}

.f {
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigatorSpan {
    color: antiquewhite;
}

.navigation:not(.el-menu--collapse) {
    height: 100%;
    width: 100%;
}

.btn {
    /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
    height: 3em;
    width: 6em;
    font-size: 1em;
}
</style>
